import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import CaseStore, { CaseDataTable } from '../../stores/CaseStore';

import { NavBar, Icon } from 'antd-mobile';
import { Table } from 'antd';

import './HotTopTenTable.scss';

interface HotTopTenProps {
    caseStore: CaseStore;
    routingStore: RouterStore;
}
const detailsColumns = [
    {
        dataIndex: 'title',
        key: 'title',
        width: 200,
        render: (text: string, record: string, index: number) => {
            return (
                <div className="hot-top-font">
                    {text + ':'}
                </div>
            );
        }
    },
    {
        dataIndex: 'info',
        key: 'info',
        render: (text: string, record: string, index: number) => {
            return (
                <div className="hot-top-font">
                    {text}
                </div>
            );
        }

    }
];

@inject('caseStore', 'routingStore')
@observer
export default class HotEventDetails extends Component<HotTopTenProps> {
    componentWillMount() {
        this.props.caseStore.getHotTopTenList();
    }
    render() {
        const { caseStore, routingStore } = this.props;
        // const title = caseStore.CaseListCategory;
        const hotTopTenList = caseStore.HotTopTenList;
        return (
            <div className="hot-top-page">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span style={{ fontFamily: 'Arial, Helvetica, sans-serif' }}>返回</span>}
                    onLeftClick={() => { routingStore.goBack(); }}
                >
                    详情
                </NavBar>
                <div className="hot-top-container">
                    <div className="hot-top-title">
                        热点诉求
                    </div>
                    {
                        hotTopTenList.map((v: CaseDataTable[], index: number) => {
                            return (
                                <div key={index} className="table-item">
                                    <Table
                                        dataSource={v}
                                        columns={detailsColumns}
                                        bordered={true}
                                        pagination={false}
                                        showHeader={false}
                                    />
                                </div>
                            );
                        })
                    }
                </div>

            </div>
        );
    }
}